<template>
  <!-- 插槽 -->
  <!-- 插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的 -->
  <!-- 插槽内容无法访问子组件的数据。任何父组件模板中的东西都只被编译到父组件的作用域中；而任何子组件模板中的东西都只被编译到子组件的作用域中 -->
  <SlotContent>
    <!-- 要为具名插槽传入内容，需要使用一个含v-slot指令的<template>元素，并将目标插槽的名字传给该指令 -->
    <template v-slot:header>我是header</template>
    <template #aside>
      <div>我是aside</div>
    </template>
    <template #default>我是main</template>
    <!-- 动态插槽名 -->
    <!-- 接收插槽 prop 对象 -->
    <template #[foot]="slotProps">{{ slotProps.text }} {{ slotProps.count }}我是footer {{ slotProps }}</template>
    <!-- 使用解构 -->
    <!-- <template #[foot]="{ text, count }">{{ text }} {{ count }}我是footer</template> -->
  </SlotContent>
</template>

<script setup>
import { ref } from 'vue'
import SlotContent from '../components/SlotContent.vue'

const foot = ref('footer')

</script>

<style scoped>

</style>